<div class="card ev-challenge-card hoverable z-depth-2 margin-bottom-cancel">
  <div class="card-image ev-card-image">
    <img class="bg-img" [src]="challenge['image']" appLazyLoadImage/>
  </div>
  <div class="card-content">
    <p class="fs-20 fw-regular truncate">{{ challenge['title'] }}</p>
    <p>
      <strong class="text-light-black fs-12">Organized by</strong> <br />
      <span class="fw-light fs-16">{{ challenge['creator']['team_name'] }}</span>
    </p>
    <p>
      <strong class="text-light-black fs-12">Starts on</strong> <br />
      <span class="fw-light fs-16">{{ challenge['start_date'] | date: 'medium' }} {{ challenge['start_zone'] }}</span>
    </p>
    <p>
      <strong class="text-light-black fs-12">Ends on</strong> <br />
      <span class="fw-light fs-16">{{ challenge['end_date'] | date: 'medium' }} {{ challenge['end_zone'] }}</span>
    </p>
    <div class="margin-top-btm" *ngIf="this.routerPublic.url === myChallengesRoute">
      <span *ngIf="challenge['approved_by_admin']">
        <div class="chip green white-text">Approved</div>
      </span>
      <span *ngIf="!challenge['approved_by_admin']">
        <div class="chip red white-text">Not Approved</div>
      </span>
      <span *ngIf="challenge['published']">
        <div class="chip green white-text">Published</div>
      </span>
      <span *ngIf="!challenge['published']">
        <div class="chip red white-text">Not Published</div>
      </span>
    </div>
  </div>
</div>
